<template>
  <div class="tw-libstyle">
  </div>
</template>

<script>
import props from './props'

export default {
  name: 'lib-libstyle',

  props,

  methods: {
    init () {
      let style = this.innerStyle.replace(/\n/gm, '')

      if (typeof this.clickNavHandler === 'function') {
        style = this.clickNavHandler()
      }

      this.addStyle(style)
    },

    addStyle (style) {
      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style

      document.head.appendChild(styleEl)
    }
  },

  created () {
    this.init()
  },

  watch: {
    innerStyle () {
      this.init()
    },

    clickNavHandler () {
      this.init()
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
